<template>
	<view class="content">
		<template v-if="token">
			<view class="back">
				<image :src="listimgUrl.imgUrl ? $u.fileBaseUrl + listimgUrl.imgUrl : ''" mode="widthFix"></image>
				<view class="punctuation one" v-for="(item, index) in visibleAttractions" :key="index"
					:style="{position:'absolute', top: (item.topPoint || 0) + '%', left: (item.leftPoint || 0) + '%'}"
					:class="{'fade-in': item.visible}">
					<image @click="getImage(item.images)"
						:src="item.images ? $u.fileBaseUrl + item.images.split(',')[0] : '' " mode="aspectFill">
					</image>
				</view>
			</view>
			<view class="info-window">
				<u-empty v-if="orderlist.length <= 0" mode="order" width="20%" textSize="25"
					icon="http://cdn.uviewui.com/uview/empty/order.png">
				</u-empty>
				<u-scroll-list :indicator="true" v-else>
					<view class="scroll" v-for="(item, index) in orderlist" :key="index" @click="getDetail(item.id)">
						<view class="nav">
							<text></text>
							<text>TA们正在路上</text>
						</view>
						<image :src="$u.fileBaseUrl+ item.orderImage.split(',')[0]" mode="aspectFill"></image>
						<text class="orderTitle">{{ item.orderTitle }}</text>

					</view>
				</u-scroll-list>
			</view>

		</template>

		<template v-else>
			<view class="no-token-wrap">
				<text>登录后才有数据哦～</text>
				<button class="button" @click="login">一键登录</button>
			</view>
		</template>

		<u-popup :show="show" mode="top" round="20" @close="close" @open="open">
			<view class="popup-wrap" @click="goDetail(detailList.packageId)">

				<view class="map-wrap">
					<view class="imap-image-wrap">

						<image class="map-image" :src="listimgUrl.imgUrl ? $u.fileBaseUrl + listimgUrl.imgUrl : ''"
							mode="widthFix"></image>
						<view class="punctuation one" v-for="(item, index) in visibleAttractions" :key="index"
							:style="{position:'absolute', top: (item.topPoint || 0) + '%', left: (item.leftPoint || 0) + '%'}"
							:class="{'fade-in': item.visible}">
							<image @click="getImage(item.images)"
								:src="item.images ? $u.fileBaseUrl + item.images.split(',')[0] : '' " mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
				<view class="introduce">
					<u-icon name="map-fill" color="#ec6531" size="50"></u-icon>
					<view class="orderPathAttraction">
						{{detailList.pathName}}
					</view>
				</view>
				<view class="detail-intro-wrap">
					<view class="detail-intro-top">
						<view class="detail-intro-item">
							<uni-icons type="camera" size="25" color="#f55c21"></uni-icons>
							<view v-if="detailList.needCameraman == 0">
								{{detailList.cameramanSex =='male_photography' ? '男' : '女' }}{{detailList.cameramanType =="ordinary_photographer" ?'高级' :'普通' }}摄影师
							</view>
							<view v-if="detailList.needCameraman == 1">
								不包含摄影师
							</view>
						</view>
						<view class="detail-intro-item">
							<uni-icons type="image" size="25" color="#f55c21"></uni-icons>
							<view>
								精修{{detailList.truingNumber}}张简修{{detailList.simpleModifyNumber}}张
							</view>
						</view>
					</view>
					<view class="detail-intro-bottom">
						<view class="detail-intro-item">
							<uni-icons type="calendar-filled" size="25" color="#f55c21"></uni-icons>
							<view>
								{{detailList.containTickets==0 ?'包含门票':'不包含门票'}}
							</view>
						</view>
						<view class="detail-intro-item">
							<uni-icons type="home-filled" size="25" color="#f55c21"></uni-icons>
							<view>
								{{detailList.containStay==0 ?'包含住宿':'不包含住宿'}}
							</view>
						</view>
						<view class="detail-intro-item">
							<uni-icons type="person-filled" size="25" color="#f55c21"></uni-icons>
							<view>
								{{detailList.peopleNumber ? detailList.peopleNumber : 1 }}人套餐
							</view>
						</view>
					</view>

				</view>
			</view>
		</u-popup>
		<cc-myTabbar :tabBarShow="2"></cc-myTabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				characterPosition: 0,
				isMovingForward: true,
				listimgUrl: {},
				list: [],
				visibleAttractions: [],
				attractionsPerView: 5,
				currentIndex: 0,
				orderlist: [{

				}],
				page: {
					pageSize: 10,
					pageNum: 1
				},
				show: false,
				detailList: {}
			};
		},
		computed: {},
		onShow() {
			if (this.token) {
				this.getqueryByArea()
				this.getlistOtherOrder()
			}
			//  else {
			// 	uni.navigateTo({
			// 		url: '/packages/login/login'
			// 	})
			// }
		},
		methods: {
			open() {},
			close() {
				this.show = false
			},

			// 登录
			async login() {
				let that = this
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					async success(event) {
						// 客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						let res = await that.$u.api.login({
							code: event.code
						});
						if (res.code === 200) {
							uni.showToast({
								icon: 'fail',
								title: '登录成功'
							})
						}
						uni.setStorageSync('token', res.data)
						that.token = res.data
						that.getqueryByArea()
						that.getlistOtherOrder()
					},
					fail: function(err) {
						console.log(err);
					}
				})
			},


			async getDetail(id) {
				let res = await this.$u.api.getorderDetail({
					id: id
				})
				if (res.code == 200) {
					this.detailList = res.data
					this.show = true
				}
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/packagesMe/me/shoppingDetail?id=${id}`
				})
			},
			// 预览
			getImage(images) {
				const imagesArray = images.split(',')
				for (var i = 0; i < imagesArray.length; i++) {
					imagesArray[i] = this.$u.fileBaseUrl + imagesArray[i];
				}
				console.log(imagesArray);
				console.log(this.$u.fileBaseUrl + images.split(',')[0]);
				uni.previewImage({
					current: imagesArray[0], // 当前显示图片的http链接
					urls: imagesArray // 需要预览的图片http链接列表
				})

			},
			// 获取地图图片
			async getqueryByArea() {
				let res = await this.$u.api.getqueryByArea()
				if (res.code == 200) {
					this.listimgUrl = res.data
					this.getAttractionList()
				}
			},
			// 获取景点
			async getAttractionList() {
				let res = await this.$u.api.getAttractionList()
				if (res.code == 200) {
					this.list = res.rows
					// this.list = res.rows.map(item => {
					// 	// 将 images 字符串转换为数组对象
					// 	const imagesArray = item.images.split(',').map(url => ({
					// 		url: url.trim()
					// 	}));

					// 	return {
					// 		...item,
					// 		images: imagesArray
					// 	};
					// });
					this.startAttractionRotation();
				}
			},

			startAttractionRotation() {
				this.updateVisibleAttractions();
				setInterval(() => {
					this.currentIndex = (this.currentIndex + 1) % this.list.length;
					this.updateVisibleAttractions();
				}, 10000); // 每5秒更新一次
			},

			updateVisibleAttractions() {
				this.visibleAttractions = [];
				for (let i = 0; i < this.attractionsPerView; i++) {
					let index = (this.currentIndex + i) % this.list.length;
					let attraction = {
						...this.list[index],
						visible: false
					};
					this.visibleAttractions.push(attraction);
					// 使用setTimeout来创建淡入效果
					setTimeout(() => {
						attraction.visible = true;
					}, i * 200); // 每个景点延迟200ms出现
				}
			},
			// 获取订单
			async getlistOtherOrder() {
				let res = await this.$u.api.getlistOtherOrder(this.page)
				if (res.code == 200) {
					this.orderlist = res.rows
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// display: flex;
		min-height: 80vh;
		position: relative;
		background-color: #fff;
		// align-items: center;
		// justify-content: center;
		overflow: hidden;
		// padding-top: 100rpx;
		box-sizing: border-box;
		position: relative;

		.back {
			position: absolute;
			z-index: 1;
			width: 100%;
			overflow: hidden;
			text-align: center;

			image {
				width: 100%;
				overflow: hidden;
			}
		}

		.imageList,
		.back {
			z-index: 999;

			.punctuation {
				width: 120rpx;
				height: 120rpx;
				// position: absolute;
				// top: 50%;
				// left: 50%;
				background: url(../../static/images/index/dw.png) no-repeat;
				background-size: 120rpx 120rpx;
				transform: translate(-50%, -100%);
				opacity: 0;
				transition: opacity 0.5s ease-in-out;

				&.fade-in {
					opacity: 1;
				}

				&.one {
					image {
						position: absolute;
						top: 20rpx;
						left: 35rpx;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}
				}
			}

		}


		.info-window {
			width: 96%;
			background-color: #e1e1e1;
			position: fixed;
			bottom: 190rpx;
			left: 50%;
			transform: translateX(-50%);
			padding: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			font-size: 24rpx;
			z-index: 999;

			.scroll {
				position: relative;
				width: 100%;
				height: 200rpx;
				z-index: 9999;

				.nav {
					position: absolute;
					display: flex;
					align-items: center;
					width: 100%;
					z-index: 99999;
					padding: 5rpx 20rpx;
					box-sizing: border-box;

					text {
						font-size: 30rpx;
						left: 20rpx;
						top: 20rpx;


						&:nth-child(1) {
							display: block;
							width: 10rpx;
							height: 24rpx;
							background-color: $overall-color;
							margin-right: 10rpx;
						}
					}
				}

				image {
					width: 100%;
					position: absolute;
					height: 200rpx;
				}

				.orderTitle {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					display: block;
					font-weight: 500;
					font-size: 23rpx;
					z-index: 99999;
					background-color: rgba(255, 255, 255, 0.5);
					padding: 5rpx 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.popup-wrap {
			width: 100%;
			padding: 20rpx;

			.introduce {
				border-radius: 10rpx;
				padding: 15rpx;
				background-color: #fff;
				box-shadow: 1rpx 5rpx 15rpx #c1c1c1;
				display: flex;
				align-items: center;
				gap: 10rpx;
				border-radius: 10rpx;

			}

			.detail-intro-wrap {
				padding: 30rpx 70rpx;
			}



			.detail-intro-top,
			.detail-intro-bottom {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
			}

			.detail-intro-item {
				display: flex;
				align-items: center;
				gap: 15rpx;
			}

		}


	}

	.no-token-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 300rpx;

		.button {
			width: 45%;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			margin-top: 20rpx;

			&:nth-child(1) {
				color: $overall-color;
				background-color: #fff;
				border: 2rpx solid $overall-color;
			}

			&:nth-child(2) {
				color: #fff;
				background-color: $overall-color;
			}
		}
	}

	.map-wrap {
		padding: 50rpx 100rpx;

		.imap-image-wrap {
			width: 100%;
			position: relative;
		}

		.map-image {
			width: 550rpx;
		}

		.punctuation {
			width: 120rpx;
			height: 120rpx;
			background: url(../../static/images/index/dw.png) no-repeat;
			background-size: 120rpx 120rpx;
			transform: translate(-50%, -100%);
			opacity: 0;
			transition: opacity 0.5s ease-in-out;

			&.fade-in {
				opacity: 1;
			}

			&.one {
				image {
					position: absolute;
					top: 20rpx;
					left: 35rpx;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>